import React, { PureComponent } from 'react'
import { addCounter, subCounter } from '../store/action'

// 引入connect 
import { connect } from 'react-redux'

export class About extends PureComponent {
  
    changeCounter(num, flag) {
        if (flag) {
            this.props.addNumber(num)
        } else {
            this.props.subNumber(num)
        }

    }
    render() {
        const { counter, banners,recommends } = this.props
        return (
            <div>
                <p>About counter : {counter}</p>
                <button onClick={() => this.changeCounter(5, true)}>+5</button>
                <button onClick={() => this.changeCounter(-3, false)}>-3</button>
                <div>
                    <p>banner</p>
                    <ul>
                        {
                            banners.map((item, index) => {
                              return <li key={index}>{item.title}</li>
                            })
                        }
                    </ul>
                </div>
                <div>
                    <p>recommends</p>
                    <ul>
                        {
                            recommends.map((item,index)=>{
                                return <li key={index}>{item.title}</li>
                            })
                        }
                    </ul>
                </div>
            </div>
        )
    }
}

// 创建 store 映射
const mapStoreToProps = (state) => {
    return {
        counter: state.counter,
        banners: state.banners,
        recommends: state.recommends
    }
}
// 映射action
const mapDispatchToProps = (dispatch) => {
    return {
        addNumber: (num) => dispatch(addCounter(num)),
        subNumber: (num) => dispatch(subCounter(num))
    }
}

export default connect(mapStoreToProps, mapDispatchToProps)(About)